<template>
  <div class="dashboard-container">
    <el-row :gutter="20">
      <el-col :span="8">
        <!-- 用户个人信息展示卡 -->
        <el-card class="box-card">
          <div class="user">
            <img :src="avatar" alt="">
            <div class="userinfo">
              <p class="name">{{ username }}</p>
              <p class="access">管理员</p>
            </div>
          </div>
          <div class="login-info">
            <p>上次登录时间：<span>2023-06-03</span></p>
            <p>上次登录地点：<span>广东</span></p>
          </div>
        </el-card>
        <!-- 订单数据展示卡 -->
        <el-card class="order-card">
          <el-table
            :data="attractionSales"
            style="width: 100%"
          >
            <el-table-column
              type="index"
              label="序号"
            />
            <el-table-column
              prop="attrName"
              label="景区名称"
              :show-overflow-tooltip="true"
            >
              <template slot-scope="{row}">
                <span>{{ row.attrName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="totalCount"
              label="成交量"
              width="80"
            />
            <el-table-column
              prop="totalMoney"
              label="营业额（元）"
              width="150"
              sortable
            />
          </el-table>
        </el-card>
      </el-col>
      <el-col :span="16">
        <!-- 今日数据卡 -->
        <div class="num">
          <el-card :body-style="{display: 'flex', padding: '0'}">
            <i class="icon" :class="`el-icon-success`" />
            <div class="num-detail">
              <p class="val">{{ daySale.count }}</p>
              <p class="desc">今日成交量</p>
            </div>
          </el-card>
          <el-card :body-style="{display: 'flex', padding: '0'}">
            <i class="icon un-paid" :class="`el-icon-warning`" />
            <div class="num-detail">
              <p class="val">{{ daySale.unPaidCount || 0 }}</p>
              <p class="desc">今日待支付总量</p>
            </div>
          </el-card>
          <el-card :body-style="{display: 'flex', padding: '0'}">
            <i class="icon error" :class="`el-icon-star-on`" />
            <div class="num-detail">
              <p class="val">{{ saleYear.countYear || 0 }}</p>
              <p class="desc">年度交易量</p>
            </div>
          </el-card>
          <el-card :body-style="{display: 'flex', padding: '0'}">
            <i class="icon" :class="`el-icon-success`" />
            <div class="num-detail">
              <p class="val">￥{{ daySale.totalMoney || 0 }}</p>
              <p class="desc">今日营业额</p>
            </div>
          </el-card>
          <el-card :body-style="{display: 'flex', padding: '0'}">
            <i class="icon un-paid" :class="`el-icon-warning`" />
            <div class="num-detail">
              <p class="val">￥{{ daySale.unPaidMoney|| 0 }}</p>
              <p class="desc">今日待付款总额</p>
            </div>
          </el-card>
          <el-card :body-style="{display: 'flex', padding: '0'}">
            <i class="icon error" :class="`el-icon-star-on`" />
            <div class="num-detail">
              <p class="val">￥{{ saleYear.moneyYear || 0 }}</p>
              <p class="desc">年度营业额</p>
            </div>
          </el-card>
        </div>
        <el-card style="height: 280px;">
          <div ref="lineChart" class="line-chart" style="height: 260px;" />
        </el-card>
        <div class="graph">
          <el-card>
            <div ref="pieChart" style="height: 260px;" />
          </el-card>
          <el-card>
            <div ref="barChart" style="height: 260px;" />
          </el-card>
        </div>

      </el-col>
    </el-row>
    <!-- <div class="dashboard-text">用户: {{ username }}</div> -->
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { mapGetters } from 'vuex'
import { getSalesTop, getSaleDay, getSaleByQuarter, getSaleByMonth, getSaleByYear } from '@/api/statics'

export default {
  name: 'Dashboard',
  data() {
    return {
      attractionSales: [],
      daySale: {
        count: 0,
        totalMoney: 0,
        unPaidCount: 0,
        unPaidMoney: 0,
        cancelCount: 0,
        cancelMoney: 0
      },
      count: [],
      totalMoney: [],
      pieChart: [],
      quarter: ['第一季度', '第二季度', '第三季度', '第四季度'],
      saleYear: {},
      attrs: [],
      sale: []
    }
  },
  computed: {
    ...mapGetters([
      'username',
      'avatar'
    ])
  },
  created() {
    // this.getSalesTop()
    this.getSaleDay()
    getSaleByYear().then(res => {
      const { countYear, moneyYear } = res.data
      this.saleYear = {
        countYear,
        moneyYear
      }
    })
  },
  mounted() {
    const lineChart = echarts.init(this.$refs.lineChart)
    var option = {
      title: {
        text: '景区营业分析表',
        x: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      toolbox: {
        feature: {
          dataView: { show: true, readOnly: false },
          magicType: { show: true, type: ['line', 'bar'] },
          restore: { show: true },
          saveAsImage: { show: true }
        }
      },
      legend: {
        data: ['营业额（元）'],
        left: 'left'
        // left: 20
      },
      xAxis: [
        {
          type: 'category',
          data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: {
        type: 'value'
      },
      series: [
        // {
        //   name: '成交量',
        //   type: 'bar',
        //   data: []
        // },
        {
          name: '营业额（元）',
          type: 'bar',
          data: []
        }
        // {
        //   name: '营业额（元）',
        //   type: 'line',
        //   data: []
        // }
      ]
    }

    const pieChart = echarts.init(this.$refs.pieChart)
    var pieOption = {
      title: {
        text: '各季度营业额统计',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: '营业额（元）',
          type: 'pie',
          radius: '70%',
          label: {
            normal: {
              show: true,
              position: 'inner',
              textStyle: {
                fontWeight: 300,
                fontSize: 15
              },
              formatter: '{d}%'
            }
          },
          data: [],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    }

    const barChart = echarts.init(this.$refs.barChart)
    var barOption = {
      title: {
        text: '景区',
        left: 'center'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {
        left: 'left'
      },
      grid: {
        left: '10%',
        // right: '4%',
        // bottom: '5%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        name: '景区',
        nameLocation: 'end',
        textStyle: {
          align: 'left',
          width: '10'
        },
        type: 'category',
        data: []
      },
      series: [
        {
          name: '营业额（元）',
          type: 'bar',
          data: []
        }
      ]
    }
    getSaleByQuarter().then(res => {
      console.log(res)
      // option.xAxis.data = res.data.x
      const { totalMoney } = res.data
      pieOption.series[0].data = [
        { name: this.quarter[0], value: totalMoney[0] },
        { name: this.quarter[1], value: totalMoney[1] },
        { name: this.quarter[2], value: totalMoney[2] },
        { name: this.quarter[3], value: totalMoney[3] }
      ]
      console.log('piechart: ', this.pieChart)
      pieChart.setOption(pieOption)
    })

    getSaleByMonth().then(res => {
      console.log(res)
      const { moneyMonth } = res.data
      // option.series[0].data = countMonth
      option.series[0].data = moneyMonth
      // option.series[1].data = moneyMonth
      lineChart.setOption(option)
    })
    // const sale = []
    // const attrs = []
    // this.attractionSales.forEach((item, index) => {
    //   sale.push(item.totalMoney)
    //   attrs.push(item.attrName)
    // })
    // console.log(sale, attrs)
    getSalesTop().then(res => {
      const { attractionSales } = res.data
      this.attractionSales = attractionSales
      this.attractionSales.forEach((item, index) => {
        this.sale.push(item.totalMoney)
        this.attrs.push(item.attrName)
      })
      barOption.series[0].data = this.sale
      barOption.yAxis.data = this.attrs

      barChart.setOption(barOption)
    })
  },
  methods: {
    async getSalesTop() {
      const res = await getSalesTop()
      if (res.code === 200) {
        const { attractionSales } = res.data
        this.attractionSales = attractionSales
        console.log(this.attractionSales)
        this.attractionSales.forEach((item, index) => {
          this.sale.push(item.totalMoney)
          this.attrs.push(item.attrName)
        })
        console.log(this.sale, this.attrs)
      }
    },
    async getSaleDay() {
      const res = await getSaleDay()
      console.log(res)
      if (res.code === 200) {
        const { count, totalMoney, unPaidCount, unPaidMoney, cancelCount, cancelMoney } = res.data
        // this.daySale = daySale
        this.daySale = {
          count,
          totalMoney,
          unPaidCount,
          unPaidMoney,
          cancelCount,
          cancelMoney
        }
        console.log(this.daySale)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
p {
  margin: 0;
  padding: 0;
}
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.box-card {
    .user {
      padding-bottom: 20px;
      margin-bottom: 20px;
      border-bottom: 1px solid #ccc;
      display: flex;
      align-items: center;
      img {
        margin-right: 40px;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
      }
    }
    .userinfo {
      .name {
        font-size: 32px;
        margin-bottom: 10px;
      }
      .access {
        font-size: 14px;
        color: #999;
      }
    }
    .login-info {
      p {
        line-height: 24px;
        font-size: 14px;
        color: #999;

        span {
          color: #666;
          margin-left: 60px;
        }
      }
    }
}

.order-card {
  margin-top: 20px;

  .attr-name {
    white-space: nowrap;
  }
}

.num {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  .icon {
    width: 80px;
    height: 80px;
    font-size: 30px;
    text-align: center;
    line-height: 80px;
    color: #fff;
    background: #118e77;
  }
  .success {
    background: #118e77;
  }
  .un-paid {
    background: #eccc68;
  }
  .error {
    background: #e74c3c;
  }
  .num-detail {
      display: flex;
      margin-left: 15px;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      .val {
        font-size: 30px;
        margin-bottom: 10px;
        line-height: 30px;
        height: 30px;
      }
      // .val::before {
      //   content: '￥ ';
      // }
      .desc {
        font-size: 14px;
        color: #999;
        // text-align: center;
      }
  }

  .el-card {
    width: 32%;
    margin-bottom: 20px;
  }

}

.graph {
  margin-top: 20px;
  display: flex;
  justify-content: space-between;

  .el-card {
    height: 260px;
    width: 50%;

    .line-chart {
      height: 250px;
      // width: 760px;
    }
  }
}

</style>
